<template>
  <div class="saleReport">
    <jc-title />
    <el-tabs v-model="activeName">
      <el-tab-pane name="proPickLian" :label="$t('menu.proPickLian')">
        <proPickLian />
      </el-tab-pane>
      <el-tab-pane name="supplementary" :label="$t('menu.supplementary')">
        <supplement />
      </el-tab-pane>
      <el-tab-pane name="proSupplTong" :label="$t('menu.proSupplTong')">
        <proSupple />
      </el-tab-pane>
      <el-tab-pane name="proStirageOrder" :label="$t('menu.proStirageOrder')">
        <proStirage />
      </el-tab-pane>
      <el-tab-pane name="outOrder" :label="$t('menu.outOrder')">
        <outOrder />
      </el-tab-pane>
      <el-tab-pane name="outStriageDetail" :label="$t('menu.outStriageDetail')">
        <outStriageDetail />
      </el-tab-pane>
      <el-tab-pane name="MaterialAvg" :label="$t('market.materialAvg')">
        <materialAvg />
      </el-tab-pane>
      <el-tab-pane name="outSuppLian" :label="$t('menu.outSuppLian')">
        <outSuppLian />
      </el-tab-pane>
      <el-tab-pane name="outSupplementary" :label="$t('menu.outSupplementary')">
        <outSupplementary />
      </el-tab-pane>
      <el-tab-pane name="assembly" :label="$t('menu.assembly')">
        <assembly />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

export default {
  name: 'Statements',
  components: {
    proPickLian: () => import('@/views/financial/costReport/proPick'),
    supplement: () => import('@/views/financial/costReport/supplemen'),
    proSupple: () => import('@/views/financial/costReport/proSupple'),
    proStirage: () => import('@/views/financial/costReport/proStirage'),
    outOrder: () => import('@/views/financial/costReport/outOrder'),
    outSuppLian: () => import('@/views/financial/costReport/outSuppLian'),
    assembly: () => import('@/views/financial/costReport/assembly'),
    outSupplementary: () => import('@/views/financial/costReport/outSupplementary'),
    outStriageDetail: () => import('@/views/financial/costReport/outStriageDetail'),
    materialAvg: () => import('@/views/financial/costReport/materialAvg')
  },
  data() {
    return {
      activeName: 'proPickLian' // tab name
    }
  }
}
</script>

<style scoped lang="scss">
.saleReport {
  @include listBom;
  .el-tabs::v-deep .el-tabs__nav-next,
  .el-tabs::v-deep .el-tabs__nav-prev {
    line-height: 28px;
    font-size: 14px;
  }
  .el-table {
    &::v-deep thead.is-group th {
      padding: 5px 0;
    }
  }
}
.btn1 {
  margin-left: 450px !important;
}

.el-dialog .el-dialog__body{
  //text-align: center;
}
.iframe-content {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

.el-form {
  display: flex;
}
.productImg{
  height: auto;
  max-height: 30px;
}
.image{
  width: auto;
  height: 100%;
  max-height: 600px;
}
</style>
